import { Empty, Layout } from 'antd';
import React, { useEffect, useState } from 'react';

import { codemuseUsers, projectList } from '@/services/workBench';
import { useStoreWorkbench } from '@/store/workbench';
import ClassifySession from './Components/ClassifySession';
import MiddleGround from './Components/MiddleGround';
import styles from './index.less';
import Sidebar from './Sidebar';

const { Content } = Layout;

const WorkBench: React.FC = () => {
  const { currentMenuItem, updateAnyValue } = useStoreWorkbench();

  const [projectData, setProjectData] = useState([]);

  // 查询项目
  const init = async () => {
    const res = await projectList({});
    if (res.code === 200) {
      const dataBro: any = [
        {
          id: '未分类会话',
          name: '未分类会话',
          label: '未分类会话',
          value: '未分类会话',
        },
        ...res.data,
      ];
      setProjectData(dataBro);
      updateAnyValue({ projectData: dataBro });
    }
    const resBro = await codemuseUsers({});
    if (resBro.code === 200 && resBro.data) {
      updateAnyValue({
        userDataList: resBro?.data?.map((item: any) => ({
          ...item,
          label: item.name,
          value: item.id,
        })),
      });
    }
  };

  // 根据项目查询需求

  useEffect(() => {
    init();
  }, []);

  useEffect(() => {
    document.addEventListener('emitSearch', init);
    return () => {
      document.removeEventListener('emitSearch', init);
    };
  }, []);

  return (
    <Layout className={styles['layout-body']}>
      <Sidebar projectData={projectData} />
      <Layout>
        <Content className={styles['layout-body']}>
          <div className={styles['container']}>
            {!currentMenuItem?.requireId?.includes('未分类会话') && (
              <div className={styles['menu-title']}>
                {currentMenuItem?.label}
              </div>
            )}
            {currentMenuItem?.requireId?.includes('未分类会话') ? (
              <ClassifySession />
            ) : currentMenuItem?.projectId ? (
              <MiddleGround />
            ) : (
              <Empty style={{ marginTop: 200 }} />
            )}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default WorkBench;
